<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	BODY {
		FONT-FAMILY:굴림;
		FONT-SIZE:11pt;
		LINE-HEIGHT:normal;
		TEXT-DECORATION:none;
	}
	#boardListForm {
		
	}
	#boardListFormUl {
		width: 250px;
		height: 270px;
		margin-right:10px;
		border:1px solid gray;
		float: left;
		border: 1;
		list-style:none;
	}
	#boardListFormLi {
 	    /* margin-right:10px; */
 	    /* padding:5px; */
		/* display:inline; */
    	/* margin-right:10px; */
	    /* float: left; */
	    /* padding-left:0px; */
	    /* padding:5px; */
		/* list-style: none; */
	}
	#align {   
		width:100%;
		text-align:center;   
	}   
	#contents {   
		margin:0 auto; /*위에서 센터로 놨음에도 또 이걸 해 주는 건 IE외의 다른 브라우저에선 이게 없으면 다시 왼쪽으로 붙기 때문*/  
		width:906px; /*이건 임의값입니다. 쓰실 데로 수정하세요*/  
		text-align:left;   
	}
	#pagingForm{
		clear:both;
	}
	#adminDeleteBtn{
		clear:both;
	}
	#googleMap {
		width: 960px;
		height: 700px;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>글목록</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko&region=KR"></script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		/* $(":input:checkbox:[name=boardAll]").click(function(){
			var flag=$(this).attr("checked");
			$(":input:checkbox:[name=boardCk]").each(function(){
				var subChecked=$(this).attr("checked");
				if(subChecked!=flag){
					$(this).click();
				}
			});
		}); */
	    $("#boardClick").click(function(){
	    	var count=$("input:checkbox:[name=boardCk]:checked").length;
	        if( count < 1 ){
	            alert("한개이상 선택이 되어야 합니다.");
	            return false;
	        }
	    });
		$("#mapView").click(function(){
			var locationArray = new Array();
			var locationNameArray = new Array();
			$.ajax({
				type:"POST",
				url:"board.do",
				data:"command=boardMapViewMarkers",
				dataType:"json",
				success:function(jsonData){
					var gps = jsonData.mapList;
					for(i=0;i<gps.length;i++){
						var gpsinfo = new google.maps.LatLng(gps[i].latitude, gps[i].longitude);
						locationArray.push(gpsinfo);
						locationNameArray.push(gps[i].title);
					}
					mapView(locationArray, locationNameArray);
				}
			});
		});
	});
	var marker = new Array();
	function mapView(locationArray, locationNameArray){
		var latlng = new google.maps.LatLng('37.49383', '127.12117');
        var options = {
            zoom: 11,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.SATELLITE
            // ROADMAP, SATELLITE, HYBRID, TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), options);
        for (i in locationArray) {
            marker[i] = new google.maps.Marker({
            	position: locationArray[i],
            	map: map,
            	title: locationNameArray[i]
            });
            clickEvent(marker[i]);
        }
	}
	function clickEvent(marker){
		google.maps.event.addListener(marker, 'click', function() {
			alert(marker.title);
			var flag = confirm("해당 게시물로 이동하시겠습니까?");
			if(flag){
				location.href="board.do?command=boardGetContentByGpsinfo&title="+marker.title;
			}
		});
	}
</script>
</head>
<body>
	<hr></hr>
	<div id="googleMap">
	<div id="align">
	<div id="contents">
	<form action="board.do">
	<input type="hidden" name="command" value="boardAdminDelete">
	<c:forEach var="bvo" items="${requestScope.lvo.list}">
		<ul id="boardListFormUl">
			<li id="boardListFormLi">
		    	<b>no.</b> ${bvo.no }<br>
		    	<c:choose>
				<c:when test="${sessionScope.memberVO.id=='admin' }">
				삭제 체크 <input type="checkbox" name="boardCk" value="${bvo.no }" id="boardCkid"><br>
				<b>Title.</b> ${bvo.title } | <b>count :</b> ${bvo.count } <br>
				<a href="${path}/board.do?command=boardContentView&no=${bvo.no }">
				<img src="${bvo.imgsrc }${bvo.imgfilename }" width="210px" height="200px"></a><br>
				<b>Writer.</b> ${bvo.writer }
				<br><br>
				</c:when>
				<c:when test="${sessionScope.memberVO!=null }">
					<b>Title.</b> ${bvo.title } | <b>count :</b> ${bvo.count } <br>
					<a href="${path}/board.do?command=boardContentView&no=${bvo.no }">
					<img src="${bvo.imgsrc }${bvo.imgfilename }" width="210px" height="200px"></a><br>
					<b>Writer.</b> ${bvo.writer }
				</c:when>
				<c:otherwise>
					<b>Title.</b> ${bvo.title } | <b>count :</b> ${bvo.count } <br>
					<img src="${bvo.imgsrc }${bvo.imgfilename }" width="210px" height="200px"><br>
					<b>Writer.</b> ${bvo.writer }
				</c:otherwise>
			</c:choose>
			</li>
		</ul>
	</c:forEach>
	<div id="adminDeleteBtn">
	<c:choose>
		<c:when test="${sessionScope.memberVO.id=='admin' }">
			<input type="submit" id="boardClick" value="삭제">
		</c:when>
		<c:when test="${sessionScope.memberVO!=null }">
			<input type="button" id="mapView" value="Map으로 보기">
		</c:when>
	</c:choose>
	</div>
		</form>
	</div>
	</div>
	<div id="pagingForm">
	<center>
	<br></br>	
	<!-- 페이징 처리 -->		
	&nbsp;
	<!-- 페이징 처리 -->	
	<%-- 이전 페이지 그룹이 있으면 이미지 보여준다.
		   이미지 링크는 현 페이지 그룹 시작페이지 번호 -1 =>
		   이전 페이지 그룹의 마지막 페이지 번호로 한다. 
	 --%>
	 <c:if test="${requestScope.lvo.pagingBean.previousPageGroup}">
	 	<a href=
	 	"board.do?command=boardList&pageNo=${requestScope.lvo.pagingBean.
	 	startPageOfPageGroup-1}"><img src="${path}/image/board/button/left_arrow_btn.gif"></a>
	 </c:if>
	 &nbsp;
	<%-- PagingBean 을 이용해서 현재 페이지에 해당되는 페이지그룹의
		   시작페이지~~마지막페이지까지 화면에 보여준다. 
		   이 때 현재 페이지를 제외한 나머지 페이지는 링크를 걸어
		   해당 페이지에 대한 게시물 리스트 조회가 가능하도록 한다. 
	 --%>	
	<c:forEach var="i" 
	begin="${requestScope.lvo.pagingBean.startPageOfPageGroup}"
	 end="${requestScope.lvo.pagingBean.endPageOfPageGroup}">
		 <c:choose>
			<c:when test="${requestScope.lvo.pagingBean.nowPage!=i}">
	 			<a href="board.do?command=boardList&pageNo=${i}">${i}</a>
			</c:when>
			<c:otherwise>
				${i}
			</c:otherwise>
		</c:choose>
	</c:forEach>	 
	&nbsp;&nbsp;
	<%-- 다음 페이지 그룹이 있으면 화살표 이미지를 보여준다.
			이미지 링크는 현재 페이지 그룹의 마지막 번호 + 1 => 
			다음 그룹의 시작 페이지로 링크한다. 
			right_arrow_btn.gif
	 --%>
	 <c:if test="${requestScope.lvo.pagingBean.nextPageGroup}">
	 	<a href=
	 	"board.do?command=boardList&pageNo=${requestScope.lvo.pagingBean.
	 	endPageOfPageGroup+1}">
	 	<img src="${path}/image/board/button/right_arrow_btn.gif">
	 	</a>
	 </c:if>
	 </center>
	 </div>
	 </div>
	 <hr></hr>
</body>
</html>